﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李彩霞">
    <title>小米官网首页</title>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styleheader.css">
    <link rel="stylesheet" href="stylefooter.css">
</head>

<body>
   <header>
        <img src="首页0/logo1.png" alt="">
      <div class="header-middle">
        <img src="首页0/search.png" alt="">
        <input type="text" placeholder="搜索商品名称">
      </div>
       <div class="header-right">登录</div>
       <div class="clear"></div>
  </header>


<!--背景-->
   <div id="carousel-example-generic" class="carousel slide"  data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img class="img-responsive" src="首页0/banner01.jpg">
    </div>
    <div class="item">
      <img class="img-responsive" src="首页0/banner02.jpg">
    </div>
    <div class="item">
      
      <img class="img-responsive" src="首页0/banner03.jpg">
    </div>
 </div>
 </div>
<div class="clear"></div>

<div class="a-media-middle">
    <img src="首页0/sczb.png" alt="">
    <span>一个热水壶的内在修养</span>
</div>


<div class="a-middle"></div>


<div class="b-middle">
    <div class="b-middle-left">
        <img src="首页0/phone1.png" alt="">
    </div>
    <div class="b-middle-right">
        <img src="首页0/mjjx.png" alt=""> 
        <img src="首页0/xmds.png" alt="">
    </div>
</div>
<div class="clear"></div>

<!--明星单品-->
<div class="title-one">
    <img src="首页0/mxdp.png" alt="">
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/phone2.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/xmsh.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">红米4 32 GB版</span><br>
        <span class="jieshao">长续航金属千元旗舰手机</span><br>
        <span class="jiage">￥899</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">小米手环2</span><br>
        <span class="jieshao">OLED显示屏，触摸操作</span><br>
        <span class="jiage">￥149</span>
    </div>
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/phone3.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/phone4.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米5 32GB版</span><br>
        <span class="jieshao">十项黑科技，很轻很快</span><br>
        <span class="jiage">￥1559</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">小米5 64GB版</span><br>
        <span class="jieshao">十项黑科技，很轻很快</span><br>
        <span class="jiage">￥1779</span>
    </div>
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/phone5.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/phone6.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米路由器3</span><br>
        <span class="jieshao">全向增益4天线</span><br>
        <span class="jiage">￥149</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">小米5s Plus 64GB版</span><br>
        <span class="jieshao">5.7大屏双摄像机</span><br>
        <span class="jiage">￥2299</span>
    </div>
</div>



<div class="a-middle"></div>
<div class="title-one">
    <img src="首页0/xpsx.png" alt="">
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/p1.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/p2.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">防雾霾口罩</span><br>
        <span class="jieshao">PM2.5粒物，健康防护</span><br>
        <span class="jiage">￥69</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">最生活浴巾 青春系列</span><br>
        <span class="jieshao">抗菌科技，为颜值保驾护航</span><br>
        <span class="jiage">￥99</span>
    </div>

</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/p3.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/p4.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源2</span><br>
        <span class="jieshao">双向快充，仅14.1mm薄</span><br>
        <span class="jiage">￥79</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">小米盒子</span><br>
        <span class="jieshao">4K HDR 人工智能机顶盒</span><br>
        <span class="jiage">￥299</span>
    </div>
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/p5.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/p6.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源5000mAh</span><br>
        <span class="jieshao">可以放入衬衫兜的移动电源</span><br>
        <span class="jiage">￥49起</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">米兔积木机器人</span><br>
        <span class="jieshao">978个零件，手机智能遥控</span><br>
        <span class="jiage">￥499</span>
    </div>
</div>

<div class="label-middle">
    <span>更多商品></span>
</div>








<!--米家智能-->
<div class="a-middle"></div>


<div class="title-one">
    <img src="首页0/mjzn.png" alt="">
</div>
<div class="table-middle">
          <div class="table-middle-left">
            <img src="首页0/m1.png" alt="">
          </div>
          <div class="table-middle-right">
            <div class="biaoti1">
            <span class="biaoti">米家IH电饭煲</span><br>
            <span class="jieshao">多才多艺智能电饭煲</span><br>
            <span class="jiage">￥399</span>
            </div>
         </div>
 </div>
<div class="table-middle">         
         <div class="table-middle-left1">
            <span class="biaoti">米兔智能故事机</span><br>
            <span class="jieshao">海量好故事，智能语言交互，</span><br>
            <span class="jieshao">材质安全耐用</span><br>
            <span class="jiage">￥199</span>
          </div>
          <div class="table-middle-right1">
            <img src="首页0/m2.png" alt="">
          </div>
 </div>
 <div class="table-middle">         
         <div class="table-middle-left">
            <img src="首页0/m3.png" alt="">
          </div>
          <div class="table-middle-right">
            <span class="biaoti">小米空气净化器滤芯</span><br>
            <span class="jieshao">3层高效净化悬浮物，可吸入</span><br>
            <span class="jieshao">颗粒物、甲醛与异味</span><br>
            <span class="jiage">￥49起</span>
          </div>
 </div>
<div class="clear"></div>
<div class="label-middle">
    <span>更多智能产品></span>
</div>
<div class="a-middle"></div>
<div class="ab-middle">
    <div class="ab-middle-left">
        <ul>
            <li><img src="首页0/n1.png" alt=""></li>
            <li><img src="首页0/n2.png" alt=""></li>
            <li><img src="首页0/n3.png" alt=""></li>
        </ul>
    </div>
    <div class="ab-middle-left">
        <ul>
            <li><img src="首页0/n4.png" alt=""></li>
            <li><img src="首页0/n5.png" alt=""></li>
            <li><img src="首页0/n6.png" alt=""></li>
        </ul>
    </div>
  <div class="clear"></div>  
</div>

<div class="aa-middle">
    <img src="首页0/cnxh.jpg" alt="">
</div>

<!--职场白领-->
<div class="title-one">
    <img src="首页0/zcbl.png" alt="">
</div>
<div class="ac-middle">
    <img src="首页0/banner3.png" alt="">
</div>

<div class="ad-middle">
    <div class="ad-middle-left">
            <span class="biaoti">小米手机5</span><br>
            <span class="jieshao">骁龙820/4轴抖相机/全功能NFC</span>
    </div>
    <div class="ad-middle-right">
            <span class="jiage1">￥1599起</span>
    </div>
</div>

<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/d1.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/d2.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源2</span><br>
        <span class="jieshao">双向快充，仅14.1mm薄</span><br>
        <span class="jiage">￥79</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">小米盒子</span><br>
        <span class="jieshao">4K HDR 人工智能机顶盒</span><br>
        <span class="jiage">￥299</span>
    </div>
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/d3.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/d4.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源5000mAh</span><br>
        <span class="jieshao">可以放入衬衫兜的移动电源</span><br>
        <span class="jiage">￥49起</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">米兔积木机器人</span><br>
        <span class="jieshao">978个零件，手机智能遥控</span><br>
        <span class="jiage">￥499</span>
    </div>
</div>
<div class="a-middle"></div>
<!--品质生活-->
<div class="title-one">
    <img src="首页0/pzsh.png" alt="">
</div>
<div class="ac-middle">
    <img src="首页0/banner4.png" alt="">
</div>
<div class="ad-middle">
    <div class="ad-middle-left">
            <span class="biaoti">小米手机5</span><br>
            <span class="jieshao">骁龙820/4轴抖相机/全功能NFC</span>
    </div>
    <div class="ad-middle-right">
            <span class="jiage1">￥1599起</span>
    </div>
</div>

<div class="ae-middle">
    <div class="ae-middle-left">
        <img src="首页0/f1.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
    <div class="ae-middle-right">
        <img src="首页0/f2.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
</div>

<div class="a-middle"></div>
<!--长假游玩-->
<div class="title-one">
    <img src="首页0/cjyw.png" alt="">
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/a1.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/a2.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源2</span><br>
        <span class="jieshao">双向快充，仅14.1mm薄</span><br>
        <span class="jiage">￥79</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">小米盒子</span><br>
        <span class="jieshao">4K HDR 人工智能机顶盒</span><br>
        <span class="jiage">￥299</span>
    </div>
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/a3.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/a4.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源5000mAh</span><br>
        <span class="jieshao">可以放入衬衫兜的移动电源</span><br>
        <span class="jiage">￥49起</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">米兔积木机器人</span><br>
        <span class="jieshao">978个零件，手机智能遥控</span><br>
        <span class="jiage">￥499</span>
    </div>
    <div class="clear"></div>
</div>
<div class="a-middle"></div>
<!--周末游-->
<div class="title-one">
    <img src="首页0/zmy.png" alt="">
</div>
<div class="ae-middle">
    <div class="ae-middle-left">
        <img src="首页0/f3.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
    <div class="ae-middle-right">
        <img src="首页0/f4.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
</div>

<div class="ae-middle">
    <div class="ae1-middle-left">
        <img src="首页0/fa1.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
    <div class="ae1-middle-right">
        <img src="首页0/fa2.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
</div>

<div class="ac-middle">
    <img src="首页0/banner5.png" alt="">
</div>
<div class="ad-middle">
    <div class="ad-middle-left">
            <span class="biaoti">小米手机5</span><br>
            <span class="jieshao">骁龙820/4轴抖相机/全功能NFC</span>
    </div>
    <div class="ad-middle-right">
            <span class="jiage1">￥1599起</span>
    </div>
</div>
<div class="a-middle"></div>
<!--新家必备-->
<div class="title-one">
    <img src="首页0/xjbb.png" alt="">
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/x1.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/x2.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">防雾霾口罩</span><br>
        <span class="jieshao">PM2.5粒物，健康防护</span><br>
        <span class="jiage">￥69</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">最生活浴巾 青春系列</span><br>
        <span class="jieshao">抗菌科技，为颜值保驾护航</span><br>
        <span class="jiage">￥99</span>
    </div>
</div>

<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/x3.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/x4.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源2</span><br>
        <span class="jieshao">双向快充，仅14.1mm薄</span><br>
        <span class="jiage">￥79</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">小米盒子</span><br>
        <span class="jieshao">4K HDR 人工智能机顶盒</span><br>
        <span class="jiage">￥299</span>
    </div>
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/x5.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/x6.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">小米移动电源5000mAh</span><br>
        <span class="jieshao">可以放入衬衫兜的移动电源</span><br>
        <span class="jiage">￥49起</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">米兔积木机器人</span><br>
        <span class="jieshao">978个零件，手机智能遥控</span><br>
        <span class="jiage">￥499</span>
    </div>
</div>
<div class="a-middle"></div>
<!--手机好伴侣-->
<div class="title-one">
    <img src="首页0/sjhbl.png" alt="">
</div>
<div class="ac-middle">
    <img src="首页0/banner6.png" alt="">
</div>

<div class="ad-middle">
    <div class="ad-middle-left">
            <span class="biaoti">小米手机5</span><br>
            <span class="jieshao">骁龙820/4轴抖相机/全功能NFC</span>
    </div>
    <div class="ad-middle-right">
            <span class="jiage1">￥1599起</span><br>
            <span class="jiage2">￥<del>19</del></span>
    </div>
</div>
<div class="c-middle">
    <div class="c-middle-left">
           <img src="首页0/cc.png" alt="">
    </div>
    <div class="c-middle-right">
           <img src="首页0/cc1.png" alt="">
    </div>
    <div class="clear"></div>
</div>
<div class="d-middle">
    <div class="d-middle-left">
        <span class="biaoti">防雾霾口罩</span><br>
        <span class="jieshao">PM2.5粒物，健康防护</span><br>
        <span class="jiage">￥69</span>
    </div>
    <div class="d-middle-right">
        <span class="biaoti">最生活浴巾 青春系列</span><br>
        <span class="jieshao">抗菌科技，为颜值保驾护航</span><br>
        <span class="jiage">￥99</span> 
    </div>
    <div class="clear"></div>
<div class="a-middle"></div>
<!--爱宝宝-->
<div class="title-one">
    <img src="首页0/abb.png" alt="">
</div>
<div class="ac-middle">
    <img src="首页0/banner7.png" alt="">
</div>
<div class="ad-middle">
    <div class="ad-middle-left">
            <span class="biaoti">小米手机5</span><br>
            <span class="jieshao">骁龙820/4轴抖相机/全功能NFC</span>
    </div>
    <div class="ad-middle-right">
            <span class="jiage1">￥1599起</span>
    </div>
</div>
<div class="ae-middle">
    <div class="ae-middle-left">
        <img src="首页0/f5.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
    <div class="ae-middle-right">
        <img src="首页0/f6.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
</div>
<div class="ae-middle">
    <div class="ae1-middle-left">
        <img src="首页0/fa3.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
    <div class="ae1-middle-right">
        <img src="首页0/fa4.png" alt="">
        <span class="biaoti">小米手机5</span><br>
        <span class="jiage">￥1599起</span>
    </div>
</div>
<div class="a-middle-footer"></div>
<footer>
    <ul>
        <li><div><img src="购物车/images/home1.png" alt=""></div><a href="index.html">首页</a></li>
        <li><div><img src="购物车/images/classify1.png" alt=""></div><a href="index1.html">分类</a></li>
        <li><div><img src="购物车/images/buy1.png" alt=""></div><a href="index2.html">购物车</a></li>
        <li><div><img src="购物车/images/person1.png" alt=""></div><a href="index3.html">我的</a></li>
    </ul>
</footer>
    <script src="Bootstrap/js/jquery-3.1.1.min.js"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>
</body>

</html>